<template>
  <a-modal
    :width="1600"
    v-model:open="visible"
    title="预览"
    :destroyOnClose="true"
    style="top: 20px"
    class="picPreview"
  >
    <div style="text-align: center">
      <a-button type="primary" :icon="h(StepBackwardOutlined)" @click="moveToFirstImage" />
      <a-button type="primary" :icon="h(LeftOutlined)" @click="previousImage" />
      <a-button
        type="primary"
        :icon="h(CaretRightOutlined)"
        @click="imageStartPlay"
        v-if="!playStatus"
      />
      <a-button type="primary" :icon="h(StopOutlined)" @click="imageStopPlay" v-if="playStatus" />
      <a-button type="primary" :icon="h(RightOutlined)" @click="nextImage" />
      <a-button type="primary" :icon="h(StepForwardOutlined)" @click="moveToEndImage" />
    </div>
    <div class="content" style="text-align: center; overflow: hidden">
      <img :width="800" :src="imageUrl" ref="image" @mousewheel.prevent="gunlun" />
    </div>

    <template #footer>
      <div class="ctr-box" style="text-align: center">
        <a-button type="primary" :icon="h(RedoOutlined)" @click="rotateL" />
        <a-button type="primary" :icon="h(ZoomInOutlined)" @click="scale(1)" />
        <a-button type="primary" :icon="h(ZoomOutOutlined)" @click="scale(-1)" />
        <a-button type="primary" :icon="h(DownloadOutlined)" />
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, PropType, watch, onDeactivated } from 'vue';
  import {
    RedoOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
    DownloadOutlined,
    StepBackwardOutlined,
    LeftOutlined,
    CaretRightOutlined,
    RightOutlined,
    StepForwardOutlined,
    StopOutlined,
  } from '@ant-design/icons-vue';
  import { h } from 'vue';
  import { ProductCategory3Type, ImageIndexType } from '/@/util/product-type';
  import { HttpConfig } from '/@/api/http-config';

  const visible = ref(false);
  const currentRotate = ref<number>(0);
  const currentScale = ref<number>(1);
  const image = ref();
  const imageIdx = ref<number>(1);
  const imageUrl = ref('');
  const playStatus = ref(false);
  const imagePalyerTzimer = ref(0);

  const props = defineProps({
    imageSrc: String,
    imageIndex: Number,
    productCount: Number,
    currentProduct: Object as PropType<ProductCategory3Type>,
    imageIndexList: Object as PropType<ImageIndexType[]>,
  });

  function showModal() {
    visible.value = true;
    imageIdx.value = props.imageIndex || 1;
    imageUrl.value = props.imageSrc || '';
  }

  function rotateL() {
    currentRotate.value += 180;
    rotateScale();
  }

  function gunlun(e) {
    let direction = e.deltaY > 0 ? 'down' : 'up';
    if (direction === 'up') {
      // 滑轮向上滚动
      scale(-1);
    } else {
      // 滑轮向下滚动
      scale(1);
    }
  }

  function rotateScale() {
    image.value.style.Transform =
      'rotate(' + currentRotate.value + 'deg)' + 'scale(' + currentScale.value + ')';
    image.value.style.webkitTransform =
      'rotate(' + currentRotate.value + 'deg)' + 'scale(' + currentScale.value + ')';
    image.value.style.MozTransform =
      'rotate(' + currentRotate.value + 'deg)' + 'scale(' + currentScale.value + ')';
    image.value.style.msTransform =
      'rotate(' + currentRotate.value + 'deg)' + 'scale(' + currentScale.value + ')';
    image.value.style.transform =
      'rotate(' + currentRotate.value + 'deg)' + 'scale(' + currentScale.value + ')';
  }

  function scale(type: number) {
    if (type >= 0) {
      currentScale.value += 0.1;
      rotateScale();
    } else {
      currentScale.value -= 0.1;
      if (currentScale.value <= 0.1) {
        currentScale.value = 0.1;
        rotateScale();
      } else {
        rotateScale();
      }
    }
  }

  function moveToFirstImage() {
    imageIdx.value = 1;
    getImageUrl();
  }

  function previousImage() {
    if (imageIdx.value <= 1) {
      imageIdx.value = props.productCount ? props.productCount : 0;
    } else {
      imageIdx.value--;
    }
    getImageUrl();
  }

  function imageStartPlay() {
    playStatus.value = true;
    imagePalyerTzimer.value = window.setInterval(function startPlayerImage() {
      nextImage();
    }, 1000);
  }

  function imageStopPlay() {
    playStatus.value = false;
    window.clearInterval(imagePalyerTzimer.value);
  }

  function nextImage() {
    if (imageIdx.value >= (props.productCount ? props.productCount : 0)) {
      imageIdx.value = 1;
    } else {
      imageIdx.value++;
    }
    getImageUrl();
  }

  function moveToEndImage() {
    imageIdx.value = props.productCount ? props.productCount : 0;
    getImageUrl();
  }

  function getImageUrl() {
    const imgList = props.imageIndexList || [];
    if (imageIdx.value && imgList.length > 0) {
      const url = `${HttpConfig.HttpPrefix}/picImageServer/image/searchById/${
        imgList[imageIdx.value - 1].id
      }`;
      imageUrl.value = url;
    }
  }

  defineExpose({ showModal });

  onDeactivated(() => {
    window.clearInterval(imagePalyerTzimer.value);
  });
</script>

<style lang="less" scoped>
  .picPreview {
    .ant-modal-footer {
      border-top: 0;
      .ctr-box {
        text-align: center;
        display: flex;
        justify-content: center;
        align-content: center;
      }
    }

    .ant-modal-body {
      padding: 0 24px;
      .originStyle {
        // position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        // transform-origin: 50% 50%;
      }
    }
  }
</style>
